<template>
    <div class="app-container">
        <div class="filter-container">
            <el-upload action="/api/cms/video"
                       ref="upload"
                       multiple
                       :data="parameter"
                       :headers="uploadAction"
                       :show-file-list="false"
                       :on-error="uploadFailedCallback"
                       :before-upload="handleBeforeUpload"
                       :on-success="uploadSuccessCallback"
            >
                <el-button v-waves class="filter-item" icon="el-icon-upload" type="primary"> 添加新视频</el-button>
            </el-upload>
        </div>
        <template>
            <el-table
                :data="tableList.items"
                v-loading="stateManager.listLoading"
                border
                fit
                highlight-current-row
                style="width: 100%;min-height:75vh;"
            >
                <el-table-column
                    prop="name"
                    label="文件名称"
                    align="center"
                >
                </el-table-column>
                <el-table-column
                    align="center"
                    prop="tags"
                    label="标签"
                >
                    <template slot-scope="scope">
                        <template v-for="item in scope.row.tags">
                            <el-tag size="mini" style="margin-right: 5px">{{item}}</el-tag>
                        </template>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="230" align="center">
                    <template slot-scope="scope">
                        <el-button size="mini" @click="showVideo(scope.row.path)"
                                   v-waves
                                   icon="fa fa-eye"></el-button>
                        <el-button size="mini" @click="showEditDialog(scope.row.id)" type="success"
                                   v-waves
                                   icon="el-icon-edit-outline"></el-button>
                        <el-button size="mini" type="danger" icon="el-icon-delete"
                                   v-waves
                                   @click="deleteItem(scope.row.id)"></el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination-container">
                <el-pagination
                    background
                    layout="prev, pager, next,total"
                    :page-size="15"
                    :total="list.total"
                    @current-change="handleCurrentChange"
                    :current-page="list.currentPage">
                </el-pagination>
            </div>

        </template>
        <el-dialog :stateManager="stateManager"></el-dialog>
    </div>
</template>

<script>
    import _dialog from './_dialog.vue'
    import {getToken} from '@/utils/auth'
    import waves from '@/directive/waves' // Waves directive
    export default {
        name: 'asset',
        components: {
            'el-dialog': _dialog,
        },
        directives: {waves},
        data: function () {
            return {
                list: this.$listDataSource({
                    url: '/api/cms/video',
                }),
                model: this.$modelDataSource({
                    url: '/api/cms/video',
                    dataKey: 'model',
                    attributes: {
                        id: 0,
                        tags: [],
                    },
                }),
                pageTitle: '视频素材',
                imgIndex: 0,
                currentPage: 1,
                parameter: {
                    type: 'all',
                    tags: '',
                },
                stateManager: {
                    refreshList: true,
                    editDialogVisible: false,
                    editModelId: null,
                    listLoading: true,
                    buttonLoading: false,
                },
                uploadAction: window.uploadHeaders,
                query: {
                    page: 1,
                    type: '',
                    tags: [],
                },
                //  点击退出变量
                isShow: false,
            }
        },
        created() {
            this.$store.commit('setPageTitle', '视频素材')
        },
        methods: {
            showVideo(path) {
                window.location.href = path
            },
            showEditDialog: function (id) {
                this.stateManager.editDialogVisible = true
                this.stateManager.editModelId = id
                this.stateManager.buttonLoading = false
            },
            uploadSuccessCallback: function (response, file) {
                let self = this
                //上传成功回调
                this.$message({
                    message: '成功上传',
                    type: 'success',
                })
                this.stateManager.refreshList = true
            },
            uploadFailedCallback: function (error, file) {
                //上传失败回调
                this.$message.error('上传失败')
            },
            // 翻页
            handleCurrentChange(val) {
                this.currentPage = val
                this.query.page = val
                this.stateManager.refreshList = true
            },

            // 删除
            deleteItem(itemId) {
                let self = this
                this.$confirm('确认删除吗，删除后不可恢复', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                    title: '删除确认',
                }).then(() => {
                    self.model.uuid = itemId
                    self.model.destroy(function () {
                        self.stateManager.refreshList = true
                        self.$message.success('删除成功')
                    }, function (error) {
                        self.$message.error(error.response.data.state)
                    })
                })
            },
            handleBeforeUpload(file) {
                let isJPG
                switch (file.type) {
                    case  'video/mp4':
                        isJPG = true
                        break
                    default:
                        isJPG = false
                }
                const isLt2M = file.size / 1024 / 1024 < 10

                if (!isJPG) {
                    this.$message.error('上传视频只能是 mp4 格式!')
                }
                if (!isLt2M) {
                    this.$message.error('上传视频大小不能超过 10MB!')
                }
                return isJPG && isLt2M
            },
        },
        computed: {
            tableList() {
                let self = this
                if (this.stateManager.refreshList) {
                    this.stateManager.listLoading = true
                    this.$store.dispatch('fetchTags')
                    this.list.fetch(self.query, function () {
                        self.stateManager.refreshList = false
                        self.stateManager.listLoading = false
                    })
                }
                return this.list
            },
        },
    }
</script>
